// header组件
.drop-menu {
    width: 96%;
}
.header .header-main .header-nav .el-dropdown {
    cursor: pointer;
    &:focus{
        outline: none
    }
}
.header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    border: 0;
    background: #fff;
    -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
    .header-main {
        margin: 0 auto;
        overflow: hidden;
        .header-logo {
            a {
                text-decoration: none;
                color: #333333;
                height: 62px;
                display: table-cell;
                vertical-align: middle;
            }
            img {
                max-height: 38px;
                width: auto;
                margin-top: 8px;
            }
        }
        .header-nav {
            font-size: 18px;
            float: left;
            width: 100%;
            .el-dropdown {
                font-size: 18px;
                color: #333333;
            }
            ul {
                li {
                    display: inline-block;
                    a {
                        padding: 0 20px;
                        line-height: 62px;
                        color: #333333;
                    }
                }
                li.active {
                    a:link,
                    a:visited {
                        color: $color-primary;
                    }
                }
            }
        }
        .right-pannel {
            margin-top: 10px;
        }
    }
    .toggle-menu,
    .toggle-search {
        color: #aaaaaa;
        font-size: 18px;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        border: none;
        margin-top: 0.4rem;
    }
    .toggle-search {
        float: right;
    }
} //   loginPannle
.login-pannel {
    float: right;
    text-align: right;
    ul {
        li {
            cursor: pointer;
            color: $color-primary;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            font-size: 14px;
            i {
                font-size: 12px;
            }
            .logo {
                width: 1.8rem;
                height: 1.8rem;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }
        .login-txt {
            a:first-child {
                margin-right: 10px;
            }
        }
        .login-add {
            margin-left: 10px;
            ;
        }
    }
} // searchPannel
.search-pannel {
    width: 100%;
    display: inline-block;
    margin-top: 5px;
    text-align: right;
    .input-area {
        display: inline-block;
        position: relative;
        i {
            display: inline-block;
            cursor: pointer;
            font-weight: 700px;
            color: #cccccc;
            position: absolute;
            top: 5px;
            right: 14px;
            font-size: 20px;
        }
        width: 50px;
        height: 30px;
        background: #fff;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: top;
        -webkit-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s;
        input {
            border: none;
            width: 0;
        }
    }
    .input-area.active {
        width: 184px;
        -webkit-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s;
        input {
            width: 155px;
            padding: 0 10px;
            -webkit-transition: all 0.3s ease-out 0s;
            -o-transition: all 0.3s ease-out 0s;
            transition: all 0.3s ease-out 0s;
        }
    }
    .el-form-item {
        margin-bottom: 0;
    }
}